<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>统战成员学习平台</title>
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<link rel="stylesheet" type="text/css" href="../../css/discovery.css" />
	<style>
		.no_more{
			text-align: center;
			color: #999;
			font-size: .65rem;
			padding: 1rem
		}
	</style>
</head>

<body>
	<div id='app' style="display:none" v-show="true" class="pl">
		<ul class="point_rule_list title">
			<li><span class="name">等级</span> <span class="right" style="color: #333;">积分标准</span></li>
		</ul>
		<ul class="point_rule_list content" style="margin-top:0.5rem">
			<li class="ui_border_b" v-for="item of items">
				<span class="name"> <span>{{item.levelName}}</span> </span>
				<span class="right">{{item.pointMin}} - {{item.pointMax}}</span>
			</li>
			<div v-if="isLastPage" @click="toTop()" class="no_more" key="no_more">没有更多了，点击回到顶部</div>
			<transition name="fade">
				<spinner v-if="loading"></spinner>
			</transition>
		</ul>
	</div>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.min.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/layer_mobile/layer.js"></script>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				items: [],
				loading: false,
				pageNum: 1,
				pageSize: 50,
				isLastPage: false
			},
			mounted: function() {
				var $this = this;
				apiready = function() {
					api.parseTapmode();
					$this.init();

					onScrollToBottom(function () {
						if ($this.isLastPage) return;
						$this.getList()
					})

					api.setRefreshHeaderInfo({
						bgColor: '#f5f5f9',
						textColor: '#aaa',
						textDown: '下拉刷新...',
						textUp: '松开刷新...'
					}, function(ret, err) {
						$this.pageNum = 1;
						$this.isLastPage = false;
						$this.getList(true)
					});
				}
			},
			methods: {
				init: function() {
					var $this = this;
					$this.getList();
				},
				getList: function(refresh) {
					var $this = this;
					if ($this.loading) return;
					$this.loading = true;
					post('/client/point/pointLevel', {
						'pageNum': $this.pageNum,
						'pageSize': $this.pageSize
					}, function(ret) {
						if (refresh) {
							api.refreshHeaderLoadDone();
							$this.items = []
						}
						ret.data.list.forEach(function(item) {
							$this.items.push(item)
						});
						$this.loading = false;
						$this.pageNum++;
					 	if (ret.data.isLastPage) return $this.isLastPage = true;
					});
				},
				toTop: function() {
					api.pageUp({'top': true}, function(){})
				}
			}
		});
	</script>
</body>

</html>
